<template>
  <div class="modeldetail">
    <div class="modeldetail-two">
      <div class="modeldetail-weight">模块信息</div>
      <div>
        <el-form :inline="true" :model="form" label-position="top" :rules="rules" ref="ruleForm">
          <div class="myelform">
            <el-form-item label="一级模块" prop="type">
              <el-select v-model="form.type" placeholder="请选择" disabled>
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="模块名称" prop="name">
              <el-input v-model="form.name" placeholder="请输入模块名称" clearable></el-input>
            </el-form-item>
            <el-form-item label="模块标识" prop="unique">
              <el-input v-model="form.unique" placeholder="请输入模块标识" clearable></el-input>
            </el-form-item>
            <el-form-item label="模块状态" prop="status">
              <el-select v-model="form.status" placeholder="请选择">
                <el-option
                  v-for="item in optionsTwo"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="模块排序（数字越大排序约靠前）" prop="listorder">
              <el-input
                v-model="form.listorder"
                placeholder="模块排序（数字越大排序约靠前）"
                type="number"
                clearable
              ></el-input>
            </el-form-item>
          </div>

          <div>
            <el-form-item label="模块描述" prop="description">
              <el-input
                style="width: 400px"
                v-model="form.description"
                placeholder="请输入模块描述"
                clearable
              ></el-input>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="图标">
              <el-upload class="avatar-uploader" action="/" :before-upload="beforeAvatarUpload">
                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
            <el-form-item label="鼠标移入时图标">
              <el-upload class="avatar-uploader" action="/" :before-upload="beforeAvatarUploadMouse">
                <img v-if="imageUrlMouseIcon" :src="imageUrlMouseIcon" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </div>
          <el-form-item>
            <el-button type="primary" @click="onConfirm('ruleForm')" :loading="loading">保存</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!-- <div class="modeldetail-two" style="margin-top: 20px" v-if="form.id">
      <div class="modeldetail-weight">模块功能</div>
      <div>
        <el-button type="primary" @click="onAddFunction" style="margin: 10px 0">新增功能</el-button>
        <el-table :data="tableData" style="width: 100%" border>
          <el-table-column label="模块名称" align="center" prop="name"></el-table-column>
          <el-table-column label="标识" align="center" prop="unique"></el-table-column>
          <el-table-column label="模块路径" align="center" prop="url"></el-table-column>
          <el-table-column label="描述" align="center" prop="description"></el-table-column>
          <el-table-column label="状态" align="center" prop="status">
            <template slot-scope="{ row }">
              {{
                row.status == 0 ? "启用" : "禁用"
              }}
            </template>
          </el-table-column>
          <el-table-column label="创建时间" align="center" prop="createtime"></el-table-column>
          <el-table-column label="创建者" align="center" prop="createuser"></el-table-column>
          <el-table-column label="icon" align="center" prop="icon">
            <template slot-scope="{ row }">
              <el-image
                :src="row.icon"
                v-if="row.icon"
                fit="contain"
                style="width: 40px; height: 40px"
              ></el-image>
            </template>
          </el-table-column>
          <el-table-column label="排序" align="center" prop="listorder"></el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="{ row }">
              <el-button type="text" @click="onEdit(row)">编辑</el-button>
              <el-button type="text" @click="onDelete(row.id)" style="color: red">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div> -->
    <el-dialog title="设置模块" :visible.sync="dialogVisible" width="30%" :close-on-click-modal="false">
      <el-form :model="formChild" label-position="top" :rules="rulesChild" ref="ruleFormChild">
        <el-form-item label="模块名称" prop="name">
          <el-input v-model="formChild.name" placeholder="请输入模块名称" clearable></el-input>
        </el-form-item>
        <el-form-item label="模块标识" prop="unique">
          <el-input v-model="formChild.unique" placeholder="请输入模块标识" clearable></el-input>
        </el-form-item>
        <el-form-item label="模块路径" prop="url">
          <el-input v-model="formChild.url" placeholder="请输入模块路径" clearable></el-input>
        </el-form-item>
        <el-form-item label="模块状态" prop="status">
          <el-select v-model="formChild.status" placeholder="请选择">
            <el-option
              v-for="item in optionsTwo"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="模块排序（数字越大排序约靠前）" prop="listorder">
          <el-input
            v-model="formChild.listorder"
            placeholder="模块排序（数字越大排序约靠前）"
            type="number"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="模块描述" prop="description">
          <el-input v-model="formChild.description" placeholder="请输入模块描述" clearable></el-input>
        </el-form-item>
        <el-form-item label="图标" v-if="form.type == 1 || form.type == 3">
          <el-upload class="avatar-uploader" action="/" :before-upload="beforeAvatarUploadChild">
            <img v-if="imageUrlChild" :src="imageUrlChild" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onConfirmChild('ruleFormChild')" :loading="loading">保存</el-button>
        </el-form-item>
      </el-form>
      <!-- <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>-->
    </el-dialog>
  </div>
</template>

<script>
import {
  postAdminUserEditcompetence,
  uploadHomeApiupload,
  postAdminUserCompetencelook,
  postAdminUserDelcompetence,
} from "@/api";
export default {
  data() {
    return {
      loading: false,
      dialogVisible: false,
      file: "",
      imageUrl: "",
      fileMouse:"",
      imageUrlMouseIcon:"",
      imageUrlChild: "",
      tableData: [],
      form: {
        type: 0,
        name: "",
        unique: "",
        status: "",
        listorder: "",
        description: "",
        icon: "",
        mouse_icon:""
      },
      rules: {
        type: [
          { required: true, message: "请选择前/后台类型", trigger: "blur" },
        ],
        name: [{ required: true, message: "请输入模块名称", trigger: "blur" }],
        unique: [
          { required: true, message: "请输入模块标识", trigger: "blur" },
        ],
        status: [{ required: true, message: "请选择状态", trigger: "blur" }],
        listorder: [
          { required: true, message: "请输入模块排序", trigger: "blur" },
        ],
        description: [
          { required: true, message: "请输入模块描述", trigger: "blur" },
        ],
      },
      formChild: {
        type: "",
        name: "",
        unique: "",
        status: "",
        listorder: "",
        description: "",
        url: "",
        icon: "",
      },
      rulesChild: {
        url: [{ required: true, message: "请输入路径", trigger: "blur" }],
        name: [{ required: true, message: "请输入模块名称", trigger: "blur" }],
        unique: [
          { required: true, message: "请输入模块标识", trigger: "blur" },
        ],
        status: [{ required: true, message: "请选择状态", trigger: "blur" }],
        listorder: [
          { required: true, message: "请输入模块排序", trigger: "blur" },
        ],
        description: [
          { required: true, message: "请输入模块描述", trigger: "blur" },
        ],
      },
      options: this.$store.state.portlist,
      optionsTwo: [
        {
          label: "启用",
          value: "0",
        },
        {
          label: "禁用",
          value: "1",
        },
      ],
    };
  },
  activated() {
    if (this.$route.query.id) {
      this.postAdminUserCompetencelook(this.$route.query.id);
    } else {
      this.form = {
        type: "0",
        name: "",
        unique: "",
        status: "",
        listorder: "",
        description: "",
        icon: "",
      }
      this.tableData = []
    }
  },
  methods: {
    beforeAvatarUpload(file) {
      let isLt10M = file.size / 1024 / 1024 < 1;
      if (!isLt10M) {
        this.$message.warning("上传图片大小不能超过1MB");
        return false;
      }
      this.file = file;
      let reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => {
        let _base64 = reader.result;
        this.imageUrl = _base64;
      };
      return false;
    },
    beforeAvatarUploadMouse(file) {
      let isLt10M = file.size / 1024 / 1024 < 1;
      if (!isLt10M) {
        this.$message.warning("上传图片大小不能超过1MB");
        return false;
      }
      this.fileMouse = file;
      let reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => {
        let _base64 = reader.result;
        this.imageUrlMouseIcon = _base64;
      };
      return false;
    },
    beforeAvatarUploadChild(file) {
      let isLt10M = file.size / 1024 / 1024 < 1;
      if (!isLt10M) {
        this.$message.warning("上传图片大小不能超过1MB");
        return false;
      }
      this.file = file;
      let reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => {
        let _base64 = reader.result;
        this.imageUrlChild = _base64;
      };
      return false;
    },
    reset() {
      let that = this;
      this.formChild = {
        sid: that.form.id,
        url: "",
        name: "",
        unique: "",
        status: "",
        listorder: "",
        description: "",
        icon: "",
      };
    },
    // 删除
    onDelete(id) {
      let that = this;
      let obj = {
        id,
      };
      that
        .$confirm("确定删除该模块?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(() => {
          postAdminUserDelcompetence(obj).then((res) => {
            that.postAdminUserCompetencelook(that.form.id);
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 编辑功能
    onEdit(e) {
      this.formChild = {
        id: e.id,
        sid: e.sid,
        url: e.url,
        name: e.name,
        unique: e.unique,
        status: e.status,
        listorder: e.listorder,
        description: e.description
      };
      if (this.form.type == 1) {
        this.imageUrlChild = e.icon
        this.formChild.icon = e.icon;
      }
      this.dialogVisible = true;
    },
    // 新增功能
    onAddFunction() {
      this.reset();
      this.dialogVisible = true;
    },
    // 详情
    postAdminUserCompetencelook(id) {
      let obj = {
        id,
        page: 1,
        size: 100,
      };
      postAdminUserCompetencelook(obj).then((res) => {
        let data = res.data;
        this.form = {
          id: data.id,
          type: data.type,
          name: data.name,
          unique: data.unique,
          status: data.status,
          listorder: data.listorder,
          description: data.description,
          icon: "",
        };
        if (data.type == 0) {
          this.form.icon = data.icon;
          this.imageUrl = data.icon;
          this.form.mouse_icon = data.mouse_icon;
          this.imageUrlMouseIcon = data.mouse_icon;
        }
        this.tableData = data.list;
      });
    },
    onConfirmChild(e) {
      let that = this;
      that.loading = true;
      this.$refs[e].validate(async (valid) => {
        if (valid) {
          if (that.form.type == 1 || that.form.type == 3) {
            if (that.imageUrlChild) {
              let http = that.imageUrlChild.substring(0, 4);
              if (http != "http") {
                await uploadHomeApiupload(that.file).then((res) => {
                  console.log("图片");
                  that.formChild.icon = res.img;
                });
              }
              await postAdminUserEditcompetence(that.formChild).then((res) => {
                console.log("添加子级模块", res);
                that.postAdminUserCompetencelook(that.form.id);
                that.$message.success("子模块添加成功");
                that.dialogVisible = false;
              });
              that.loading = false;
            } else {
              that.$message.warning("请上传ICON");
              that.loading = false;
            }
          } else {
            await postAdminUserEditcompetence(that.formChild).then((res) => {
              console.log("添加子级模块", res);
              that.postAdminUserCompetencelook(that.form.id);
              that.dialogVisible = false;
              that.$message.success("子模块添加成功");
            });
            that.loading = false;
          }
        } else {
          that.loading = false;
          return false;
        }
      });
    },
    onConfirm(e) {
      let that = this;
      that.loading = true;
      this.$refs[e].validate(async (valid) => {
        if (valid) {
          if (that.form.type == 0) {
            if (that.imageUrl && that.imageUrlMouseIcon) {
              let http = that.imageUrl.substring(0, 4);
              if (http != "http") {
                await uploadHomeApiupload(that.file).then((res) => {
                  console.log("图片");
                  that.form.icon = res.img;
                });
              }
              let httpMouseIcon = that.imageUrlMouseIcon.substring(0, 4);
              if (httpMouseIcon != "http") {
                await uploadHomeApiupload(that.fileMouse).then((res) => {
                  console.log("图片");
                  that.form.mouse_icon = res.img;
                });
              }
              await postAdminUserEditcompetence(that.form).then((res) => {
                console.log("添加顶级模块", res);
                if (!that.form.id) {
                  that.$set(that.form, "id", res.data);
                }
                that.$message.success("模块保存成功");
              });
              that.loading = false;
            } else {
              that.$message.warning("请上传ICON");
              that.loading = false;
            }
          } else {
            await postAdminUserEditcompetence(that.form).then((res) => {
              console.log("添加顶级模块", res);
              if (!that.form.id) {
                that.$set(that.form, "id", res.data);
              }
              that.$message.success("模块保存成功");
            });
            that.loading = false;
          }
        } else {
          that.loading = false;
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.myelform {
  display: flex;
  justify-content: space-between;
}
.modeldetail {
  &-one {
    display: flex;
    justify-content: space-between;
    > div:nth-child(1) {
      font-weight: 800;
    }
  }
  &-two {
    padding: 20px;
    border-radius: 4px;
    background: #ffffff;
  }
  &-weight {
    font-size: 20px;
    font-weight: 800;
  }
}
</style>